<include file="../header" />
<style>
	.keyword-input{
		margin-top: 1rem;
	}
	.keyword-btn{
		margin-top: 0.5rem;
		width: 120px;
		float: left;
	}
	.kw-btn{
		width: 50px;
	}
	.shut-down{
		width: 12px;
		height: 12px;
		position: relative;
		left: -0.5rem;
		top: -0.9rem;
		cursor: pointer;
	}
</style>
<script type="text/javascript" src="/Template/js/vue.min.js"></script>

<body class="J_scroll_fixed" id="container">
        <script type="text/javascript">
            $(function() {

				var app = new Vue({
					el: '#container',
					data: {
						keywordList: []
					},
					methods: {
						remove: function(index) {
							app.keywordList.splice(index,1);
						}
					}
				})

				$("a.add-keyword").bind("click", function() {

					var code = $(this).prev().find("input").val();
					var keyword = $(this).prev().prev().find("input").val();

					if(keyword == "") {
						alert("关键词不能为空");
						return false;
					}

					if(code == "") {
						alert("编码不能为空");
						return false;
					}

					var data = [];

					data.code = code;
					data.keyword = keyword;

					app.keywordList.push(data);

					$(this).prev().find("input").val("");
					$(this).prev().prev().find("input").val("");

				});

                var description = UE.getEditor('description',{
                    initialFrameHeight:300,
                    initialContent : "",
                    serverUrl :'{:U("activity/ueditorUpload")}'
                });

				var measureDescription = UE.getEditor('measureDescription',{
					initialFrameHeight:300,
					initialContent : "",
					serverUrl :'{:U("activity/ueditorUpload")}'
				});

				$("button#upload1").click(function(){
					//上传文件
					$.ajaxFileUpload({
						url:"{:U('product/commonUploadImage')}",//处理图片脚本
						secureuri :false,
						fileElementId :'fileToUpload1',//file控件id
						dataType : 'json',
						data:{
							"name": "fileToUpload1"
						},
						success : function (data, status){
							$("input[name=measureImage]").val(data);
							$("img[name=preShowMeasureImage]").attr("src", data);
						},
						error: function(data, status, e){
							alert(e);
						}
					})

				});

                $("button#upload").click(function(){     
                     //上传文件
                   $.ajaxFileUpload({
                       url:"{:U('activity/uploadImage')}",//处理图片脚本
                       secureuri :false,
                       fileElementId :'fileToUpload',//file控件id
                       dataType : 'json',
                       success : function (data, status){
						   $("input[name=imageUrl]").val(data);
						   $("img[name=preShow]").attr("src", data);
                       },
                       error: function(data, status, e){
                           alert(e);
                       }
                   })

               });
               
               $("button.btn_submit").click(function() {

                   	$("input[name=description]").val(description.getContent());
				   	$("input[name=measureDescription]").val(measureDescription.getContent());

					if($("select[name=needMeasure]").val() == 1) {

						var measureJson = {};

						if(app.keywordList.length == 0) {
							alert("请先添加测量元素");
							return false;
						}

						for (var i=0; i<app.keywordList.length; i++) {
							var data = {};
							data["keyword"] = app.keywordList[i]["keyword"];
							data["code"] = app.keywordList[i]["code"];
							measureJson[i] = data;
						}

						$("input[name=measureJson]").val(JSON.stringify(measureJson));

					}

                   	$("form").submit();
                   
               })

				$("select[name=needMeasure]").change(function() {
					if($(this).val() == -1) {
						$(".keyword").hide();
					} else {
						$(".keyword").show();
					}
				});

            })
            
        </script>
        <script type="text/javascript"  src="__TMP__/assets/js/ueditor/ueditor.config.js"></script>
        <script type="text/javascript"  src="__TMP__/assets/js/ueditor/ueditor.all.min.js"></script>
	<div class="wrap jj">
		<div class="common-form">
			<form method="post" class="form-horizontal J_ajaxForm" action="{:U('product/addPost')}">
				<fieldset>
					<div class="control-group">
						<label class="control-label">商品名称：</label>
						<div class="controls">
							<input type="text" class="input" name="productName" value="">
						</div>
					</div>
					<div class="control-group">
						<label class="control-label">商品图片:</label>
						<div class="controls">
							<input id="fileToUpload" type="file" name="fileToUpload" style="width:170px;">
							<button type="button" class="btn btn-primary" id="upload">上传</button>
							<input type="hidden" name="imageUrl" />
						</div>
					</div>
					<div class="control-group">
						<label class="control-label">图片预览:</label>
						<div class="controls">
							<img src="" name="preShow" style="width:200px;height:200px;" />
						</div>
					</div>
					<div class="control-group">
						<label class="control-label">所属病症：</label>
						<div class="controls">
							<select name="categoryId">
								{:getCategorySelectOptionHtml(0, 0)}
							</select>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label">价格：</label>
						<div class="controls">
							<input type="text" class="input" name="price" value="">
						</div>
					</div>
					<div class="control-group">
						<label class="control-label">需要测量：</label>
						<div class="controls">
							{:getEnumSelectWidget(C("DEFAULT_YN"), "needMeasure", 0, 0)}
							<div class="keyword">
								<div class="keyword-input">
									<span>关键词：<input class="keyword-name" type="text"></span>
									<span>编码：<input class="keyword-code" type="text"></span>
									<a href="javascript:void(0)" class="btn btn-success add-keyword">添加</a>
									<div class="keyword-btns">
										<div class="keyword-btn" v-for="(index,keyword) in keywordList">
											<a class="btn btn-danger kw-btn">{{keyword.keyword}}</a>
											<img v-on:click="remove(index)" class="shut-down" src="/Template/images/icon-shutdown.jpg" alt="x">
										</div>
									</div>
									<input type="hidden" name="measureJson" value="" />
								</div>
							</div>
						</div>
					</div>
					<div class="control-group keyword">
						<label class="control-label">测量示意：</label>
						<div class="controls">
							<input type="hidden" name="measureDescription" />
							<script type="text/plain" id="measureDescription" name="measureDescription"></script>
						</div>
					</div>
					<div class="control-group keyword">
						<label class="control-label">测量示意图:</label>
						<div class="controls">
							<input id="fileToUpload1" type="file" name="fileToUpload1" style="width:170px;">
							<button type="button" class="btn btn-primary" id="upload1">上传</button>
							<input type="hidden" name="measureImage" />
						</div>
					</div>
					<div class="control-group keyword">
						<label class="control-label">测量示意图预览:</label>
						<div class="controls">
							<img src="" name="preShowMeasureImage" style="width:200px;height:200px;" />
						</div>
					</div>
					<div class="control-group">
						<label class="control-label">详情描述：</label>
						<div class="controls">
							<input type="hidden" name="description" />
							<script type="text/plain" id="description" name="description"></script>
						</div>
					</div>
					<hr class="half-rule">
					<div class="control-group">
						<label class="control-label">团购状态：</label>
						<div class="controls">
							{:getEnumSelectWidget($statusEnum, "groupStatus", "", 0)}
						</div>
					</div>
					<div class="control-group">
						<label class="control-label">团购码：</label>
						<div class="controls">
							<input type="text" class="input" name="groupCode">
						</div>
					</div>
					<div class="control-group">
						<label class="control-label">团购价格：</label>
						<div class="controls">
							<input type="text" class="input" name="groupPrice">
						</div>
					</div>
					<div class="control-group">
						<label class="control-label">团购截止日期：</label>
						<div class="controls">
							<input type="text" class="input J_date" style="width: 100px" name="expiryDate">
						</div>
					</div>
				</fieldset>
				<div class="form-actions">
					<button type="button" class="btn btn-primary btn_submit">添加</button>
					<a class="btn" href="__URL__">返回</a>
				</div>
			</form>
		</div>
	</div>
	<script src="__ROOT__/statics/js/common.js"></script>
</body>
</html>